<template>
    <Teleport to="body">
        <transition name="el-fade-in">
            <div class="mid-list-dialog" v-if="dialogStore.isMidListDialogVisible">
                <div class="mid-list-dialog__mask" @click="onClose"></div>
                <div class="mid-list-dialog__content">
                    <div class="mid-list-dialog__close" @click="onClose">
                        <img :src="`${_oss_}images/icon-close-black.svg`" />
                    </div>

                    <div class="mid-list-dialog__nav">
                        <div class="tab-item" :class="{ active: navActive == 0 }" @click="navActive = 0">
                            作品列表
                        </div>
                        <div class="tab-item" :class="{ active: navActive == 1 }" @click="navActive = 1">
                            案例列表
                        </div>
                    </div>

                    <div class="mid-list-dialog__tabs">
                        <div class="tab-item" :class="{ active: dialogStore.midListType == 0 }" @click="onTabClick(0)">
                            点赞列表
                        </div>
                        <div class="split-line">/</div>
                        <div class="tab-item" :class="{ active: dialogStore.midListType == 1 }" @click="onTabClick(1)">
                            收藏列表
                        </div>
                    </div>

                    <div class="list" v-loading="loading">
                        <template v-if="navActive == 0">
                            <WorksGroupP v-if="list.length" :list="list" />
                            <el-empty :image-size="150" v-else-if="!loading" />
                        </template>

                        <div class="case-list" v-if="navActive == 1">
                            <CaseItemP v-if="list.length" v-for="item in list" :key="item.id" :item="item" :open="true" />
                            <el-empty :image-size="150" v-else-if="!loading" />
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </Teleport>
</template>
<script setup>
import { useContent } from ".";
const { list, loading, navActive, onTabClick, onClose } = useContent();
const dialogStore = useDialogStore();
</script>
<style lang="scss" scoped>
.mid-list-dialog {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;

    &__mask {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.5);
    }

    &__content {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1240px;
        height: 650px;
        background-color: #fff;
        transform: translate(-50%, -50%);
        border-radius: 10px;
    }

    &__nav {
        display: flex;
        align-items: center;
        padding: 10px 0 20px 10px;

        .tab-item {
            font-size: 18px;
            margin-right: 20px;

            &.active {
                position: relative;
                color: #5085fb;

                &::after {
                    content: "";
                    position: absolute;
                    bottom: -10px;
                    left: 50%;
                    width: 20px;
                    height: 2px;
                    background-color: #5085fb;
                    transform: translateX(-50%);
                }
            }

            cursor: pointer;
        }
    }

    &__tabs {
        display: flex;
        align-items: flex-end;
        padding: 10px 0 10px 10px;
        font-size: 16px;
        color: #333;
        user-select: none;

        .tab-item {
            &.active {
                font-weight: bold;
                font-size: 18px;
            }

            cursor: pointer;
        }

        .split-line {
            margin: 0 8px;
            color: #888;
        }
    }

    .list {
        height: 550px;
        overflow: auto;
        padding: 0 10px;

        .case-list {
            display: flex;
            flex-wrap: wrap;

            :deep(.el-empty) {
                margin: 0 auto;
            }
        }
    }

    &__close {
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer;

        img {
            width: 24px;
            height: 24px;
        }
    }
}
</style>
